<template>
	<view class="child" v-if="data.length !== 0">
		<view class="item" v-for="item in data" :key="item.id">
			<image :src="item.commentAvatar" mode="widthFix"></image>
			<view class="content">
				<text>来自{{item.commentUser}}的买家</text>
				<h5 style='margin: 10upx 0;'>{{item.commentContent}}</h5>
				<image :src="item.commentImg" mode="widthFix" :class="{'img':!item.commentImg}"></image>
				<text style="display: block;">{{time(item.commentTime)}}</text>
			</view>
		</view>
	</view>
	<view class="showView" v-else>
		暂无数据
	</view>
</template>

<script>
	import shijianchuo from '@/pages/person/time.js'
	export default {
		props: ['index'],
		data() {
			return {
				data: [],
				userId: 0,
			};
		},
		methods: {
			time(item) {
				return shijianchuo(Number(item))
			}
		},
		created() {
			const userId = getApp().globalData.userId
			this.userId = userId
			this.$api.getCommentUserId(this.userId).then(res => {
				// console.log(res)
				if (res.code == 200) {
					this.data = res.data
				}
			})
		},
		watch: {
			index: {
				handler(newValue, oldValue) {
					if (newValue == 3) {
						this.$api.getCommentUserId(this.userId).then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.data = res.data.filter(item => item.commentImg !== null)
							}
						})
					} else {
						this.$api.getCommentUserId(this.userId).then(res => {
							// console.log(res)
							if (res.code == 200) {
								this.data = res.data
							}
						})
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	.img{
		height: 0;
	}
	.child {
		width: 100%;

		.item {
			width: 90%;
			margin: 30upx auto;
			display: flex;

			image {
				width: 10%;
				margin-right: 20upx;
			}

			.content {
				flex: 1;
				box-sizing: border-box;
				padding: 0 0 20upx;
				border-bottom: 2upx solid rgba(153, 153, 153, .5);

				text {
					font-size: 26upx;
					color: grey;
				}
			}
		}
	}

	.showView {
		width: 130upx;
		margin: 100upx auto 0;
	}
</style>
